<template>
	<view class="container">
		<view class="header">
			<text class="title">门店运营综合数据</text>
		</view>

		<view class="filters">
			<uni-data-select v-model="value" :localdata="range" @change="change" />
			<uni-datetime-picker v-model="datetimerange" type="date" />
		</view>

		<view class="section">
			<text class="section-title">携程：门店运营数据表</text>
			<scroll-view scroll-x="true" class="table-container">
				<view class="table">
					<view class="table-header">
						<view v-for="(item, index) in fun_list_xc" :key="index" class="table-cell"
							:style="{width: item.width}">
							{{item.title}}
						</view>
					</view>
					<view v-for="(items, indexs) in data_list_xc" :key="indexs" class="table-row"
						:style="{backgroundColor: backgrounds[indexs%2]}">
						<view v-for="(item, index) in items" :key="index" class="table-cell"
							:style="{width: item.width}">
							<text v-if="item.type=='1'">{{item.title}}</text>
							<view v-if="item.type=='2'" class="progress-bar"
								:style="{width: item.content+'px', backgroundColor: index == 2 ? (item.content >= no_jd ?'#15ADBA' : '#D41E18') : jd_color[index%9]}">
								{{item.content.toFixed(2)}}%
							</view>
							<button v-if="item.type=='3'" @click="openPopup(indexs)"
								class="view-status-btn">查看房态</button>
						</view>

					</view>
				</view>
			</scroll-view>
		</view>

		<view class="section">
			<text class="section-title">美团：门店运营数据表</text>
			<scroll-view scroll-x="true" class="table-container">
				<view class="table">
					<view class="table-header">
						<view v-for="(item, index) in fun_list_mt" :key="index" class="table-cell"
							:style="{width: item.width}">
							{{item.title}}
						</view>
					</view>
					<view v-for="(items, indexs) in data_list_mt" :key="indexs" class="table-row"
						:style="{backgroundColor: backgrounds[indexs%2]}">
						<view v-for="(item, index) in items" :key="index" class="table-cell"
							:style="{width: item.width}">
							<text v-if="item.type=='1'">{{item.title}}</text>
							<view v-if="item.type=='2'" class="progress-bar"
								:style="{width: item.content+'px', backgroundColor: index == 2 ? (item.content >= no_jd ?'#15ADBA' : '#D41E18') : jd_color[index%9]}">
								{{item.content.toFixed(2)}}%
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="section">
			<text class="section-title">抖音：门店运营数据表</text>
			<scroll-view scroll-x="true" class="table-container">
				<view class="table">
					<view class="table-header">
						<view v-for="(item, index) in fun_list_dy" :key="index" class="table-cell"
							:style="{width: item.width}">
							{{item.title}}
						</view>
					</view>
					<view v-for="(items, indexs) in data_list_dy" :key="indexs" class="table-row"
						:style="{backgroundColor: backgrounds[indexs%2]}">
						<view v-for="(item, index) in items" :key="index" class="table-cell"
							:style="{width: item.width}">
							<text v-if="item.type=='1'">{{item.title}}</text>
							<view v-if="item.type=='2'" class="progress-bar"
								:style="{width: item.content+'px', backgroundColor: index == 2 ? (item.content >= no_jd ?'#15ADBA' : '#D41E18') : jd_color[index%9]}">
								{{item.content.toFixed(2)}}%
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<uni-popup ref="popup" type="center" custom-class="popup">
			<view class="popup-content">
				<view class="table-header">
					<view class="table-cell">房间名称</view>
					<view class="table-cell">房间状态</view>
				</view>
				<view v-for="(item, index) in tableData" :key="index" class="table-row">
					<view class="table-cell">{{ item.name }}</view>
					<view class="table-cell">
						<view v-for="(state, sIndex) in item.state" :key="sIndex">
							{{ state.roomStatus == 'ROOMED' ? '开启' :'关闭' }}
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { transformHotelData } from '../../util/transform.js'
	import { transformHotelDataMT } from '../../util/transform_mt.js'
	export default {
		data() {
			return {
				tableData: null,
				jd_color: ["#4B98FE", "#00D05E", "#957BFE", "#FE871B", "#00C8B0",
					"#F674D6"
				],
				backgrounds: ['rgba(89,126,155,1)', 'rgba(84,120,154,1)'],
				no_jd: 11,
				single: '',
				activeUrl: '',
				fun_list_mt: [{
					title: '酒店名称',
					width: '200px'
				}, {
					title: 'HOS分',
					width: '80px'
				}, {
					title: '销售间夜',
					width: '120px'
				}, {
					title: '销售均价',
					width: '120px'
				}, {
					title: '销售额',
					width: '120px'
				}, {
					title: '曝光人数',
					width: '120px'
				},{
					title: '点评分',
					width: '120px'
				},{
					title: '浏览人数',
					width: '120px'
				}, {
					title: '支付订单',
					width: '120px'
				}, {
					title: '曝光转换率',
					width: '120px'
				}, {
					title: '浏览转换率',
					width: '120px'
				}, {
					title: '成交率',
					width: '120px'
				}],
				fun_list_dy: [{
					title: '酒店名称',
					width: '200px'
				}, {
					title: '门店页访问人数',
					width: '120px'
				}, {
					title: '交易金额',
					width: '120px'
				}, {
					title: '核销金额',
					width: '120px'
				}, {
					title: '退款金额',
					width: '120px'
				}, {
					title: '客单价',
					width: '120px'
				}, {
					title: '商品点击人数',
					width: '120px'
				}, {
					title: '核销券数',
					width: '120px'
				}, {
					title: '成交券数',
					width: '120px'
				}, {
					title: '播放量',
					width: '120px'
				}, {
					title: '5S完播率',
					width: '120px'
				}, {
					title: '2S跳出率',
					width: '120px'
				}],
				fun_list_xc: [{
					title: '酒店名称',
					width: '200px'
				}, {
					title: '曝光量',
					width: '120px'
				}, {
					title: '实时订单',
					width: '120px'
				}, {
					title: '指定间夜',
					width: '120px'
				}, {
					title: '昨日销售',
					width: '120px'
				}, {
					title: '昨日离店',
					width: '120px'
				}, {
					title: '昨日卖价',
					width: '120px'
				}, {
					title: '实时访客',
					width: '120px'
				},{
					title:'实时排名',
					width:'120px'
				},{
					title:'点评分',
					width:'120px'
				},{
					title: '曝光转换率',
					width: '120px'
				}, {
					title: '下单转换率',
					width: '120px'
				}, {
					title: '成交转换率',
					width: '120px'
				}, {
					title: 'PSI',
					width: '120px'
				}, {
					title: '5分钟回复率',
					width: '120px'
				}, {
					title: '预订分布下载',
					width: '120px'
				}, {
					title: '履约情况',
					width: '120px'
				}, {
					title: '流量点击',
					width: '120px'
				}, {
					title: '花费金额',
					width: '120px'
				}, {
					title: '收益情况',
					width: '120px'
				}, {
					title: '转换',
					width: '120px'
				}, {
					title: '预订订单',
					width: '120px'
				},{
					title: '预订间夜',
					width: '120px'
				},{

					title: '查看房态',
					content: '查看房态',
					width: '120px'
				}],
				data_list_xc: null,
				data_list_mt: [
					
				],
				data_list_dy: [
					[{
						width: '200px',
						type: '1',
						title: '话题酒店（江岸店）',
						content: '话题酒店（江岸店）'
					}, {
						type: '1',
						title: '2.9',
						content: '2.9',
						width: '80px'
					}, {
						type: '1',
						title: '9',
						content: '9',
						width: '120px'
					}, {
						type: '1',
						title: '203.22',
						content: '203.22',
						width: '120px'
					}, {
						type: '1',
						title: '1829.00',
						content: '1829.00',
						width: '120px'
					}, {
						type: '1',
						title: '3',
						content: '3',
						width: '120px'
					}, {
						type: '1',
						title: '294',
						content: '294',
						width: '120px'
					}, {
						type: '1',
						title: '28',
						content: '28',
						width: '120px'
					}, {
						type: '1',
						title: 5,
						content: 5,
						width: '120px'
					}, {
						type: '2',
						title: 9.36,
						content: 9.36,
						width: '120px'
					}, {
						type: '2',
						title: 17.86,
						content: 17.86,
						width: '120px'
					}]
				],
				value: 0,
				range: [{
						value: 0,
						text: "集团数据"
					},
					{
						value: 1,
						text: "大长航酒店(昆明长水机场店)"
					},
					{
						value: 2,
						text: "话题酒店（江岸店)"
					}, {
						value: 3,
						text: '话题民宿（昆明机场店）'
					},
				],
				date: '2023-07',
				
				
				room_info: []
			}
		},
		onLoad() {
			var that = this
			uni.request({
				url: 'http://43.138.215.11:3384/get_xc_sy_data',
				method: 'POST',
				data: {
					hotel_name: 'all'
				},
				success(res) {
					console.log(res.data.data)
					for (var i = 0; i < res.data.data.length; i++) {
						// console.log(res.data.data[i].result)
						that.room_info.push(res.data.data[i].result)
					}
					console.log(that.room_info)
					that.data_list_xc = transformHotelData(res.data.data)
					console.log(that.data_list_xc)
				}
			})
			uni.request({
				url: 'http://43.138.215.11:3384/get_mt_sy_data',
				method: 'POST',
				data: {
					hotel_name: 'all'
				},
				success(res) {
					console.log(res.data.data)
					that.data_list_mt = transformHotelDataMT(res.data.data)
					console.log(that.data_list_mt)
				}
			})
			
		},
		methods: {
			openPopup(index) {
				// 打开弹窗
				console.log(index)
				this.$refs.popup.open();
				this.tableData = this.room_info[index]
				console.log(this.room_info[index])
			}
		}
	}
</script>

<style>
	page {
		background-color: rgba(12, 45, 88, 1);
	}

	.view-status-btn {
		background-color: rgba(75, 152, 254, 0.8);
		color: #ffffff;
		font-size: 24rpx;
		padding: 4rpx 12rpx;
		border-radius: 8rpx;
		border: none;
		cursor: pointer;
	}

	.popup-content {
		background-color: rgba(12, 45, 88, 1);
		padding: 30rpx;
		border-radius: 16rpx;
		max-height: 80vh;
		overflow-y: auto;
		width: 80vw;
	}

	.popup-content .table-header,
	.popup-content .table-row {
		display: grid;
		grid-template-columns: 2fr 1fr;
		border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	}

	.popup-content .table-cell {
		padding: 20rpx;
		color: #ffffff;
		font-size: 28rpx;
	}

	.container {
		background-color: rgba(12, 45, 88, 1);
		padding: 20rpx;
	}

	.header {
		margin-bottom: 20rpx;
	}

	.title {
		font-size: 36rpx;
		color: #ffffff;
		font-weight: bold;
		text-align: center;
	}

	.filters {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		margin-bottom: 20rpx;
	}

	.section {
		background-color: rgba(174, 200, 225, 0.1);
		border-radius: 16rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 32rpx;
		color: rgba(255, 255, 255, 0.9);
		margin-bottom: 20rpx;
	}

	.table-container {
		width: 100%;
		overflow-x: auto;
	}

	.table {
		width: 500%;
		/* Adjust based on your needs */
	}

	.table-header,
	.table-row {
		display: flex;

	}

	.table-cell {
		flex: 1;
		padding: 10rpx;
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.8);
		border-right: 1px solid rgba(255, 255, 255, 0.2);
	}

	.progress-bar {
		height: 30rpx;
		border-radius: 15rpx;
		color: #ffffff;
		text-align: center;
		font-size: 24rpx;
		line-height: 30rpx;
	}
</style>